<template>
  <el-dialog
    title="排序"
    :visible.sync="visible"
    :before-close="close"
    :close-on-click-modal="false"
    width="70%">

    <el-table
      ref="dragTable"
    	:data="dataList"
      row-key="inspectionItemId"
    	border
      fit
      highlight-current-row
      style="width: 100%">
    <el-table-column
      prop="orderId"
      header-align="center"
      type="index"
      align="center"
      label="排序号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="inspectionItemId"
      header-align="center"
      align="center"
      label="编号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="inspectionCategoryName"
      header-align="center"
      align="center"
      label="检验项分类"
      width="100">
    </el-table-column>
    <el-table-column
      prop="inspectionItemName"
      header-align="center"
      align="center"
      label="检验项名称"
      width="200">
    </el-table-column>
    <el-table-column
    	prop="insideInspectionItemValue"
    	header-align="center"
    	align="center"
    	label="内控标准值">
      <template slot-scope="{row}">
        <span v-html='row.insideInspectionItemValue'></span>
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      label="操作"
      width="80">
      <template slot-scope="{}">
        <svg-icon icon-class="drag" class-name="drag-handler" />
      </template>
    </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" class="pan-btn primary-btn" @click="submit">确 定</el-button>
  	</span>
  </el-dialog>
</template>

<script>
  import { standardSort } from '@/api/standard'
  import Sortable from 'sortablejs'
  import { isBlank,parseTime } from '@/common/js/utils'
  import {CODE_OK} from '@/common/js/config'
  export default {
    data() {
      return {
        visible: false,
        dataList: [],
        sortable: null
      }
    },
    created() {
      this.getList()
    },
    props: ["childDataForm"],
    methods: {
      getList() {
        if (!isBlank(this.childDataForm)) {
          this.dataList = this.childDataForm.items
          this.$nextTick(() => {
            this.setSort()
          })
          this.visible = true
        }
      },
      setSort() {
        const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        this.sortable = Sortable.create(el, {
          ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
          setData: function(dataTransfer) {
            // to avoid Firefox bug
            // Detail see : https://github.com/RubaXa/Sortable/issues/1012
            dataTransfer.setData('Text', '')
          },
          onEnd: evt => {
            const targetRow = this.dataList.splice(evt.oldIndex, 1)[0]
            this.dataList.splice(evt.newIndex, 0, targetRow)
          }
        })
      },
      submit() {
        for (let i=0,j=this.dataList.length; i<j; i++) {
          this.dataList[i].orderId = i + 1
        }
        standardSort(this.dataList).then(res => {
          if (res.code === CODE_OK) {
            this.$message({
              message: '提交成功',
              type: 'success',
              duration: 1500,
              onClose: this.close("submit")
            })
          }else{
            this.$message.error(res.msg)
          }
        })
      },
      close(val) {
        this.$emit('close')
        if (!isBlank(val)) {
          this.$emit('refreshData')
        }
        this.visible = false
      },
    }
  }
</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
</style>
